<template>
  <div style="margin-top: 50px">
    <el-form :model="value"
             :rules="rules"
             ref="infoForm"
             label-width="120px"
             size="small">
      <el-form-item v-if="userId === 110" label="供应商" prop="deptId">
        <treeselect v-model="value.deptId" :options="deptOptions" :normalizer="normalizerDept" placeholder="选择指定供应商"/>
      </el-form-item>

      <el-form-item label="分类名称" prop="catName">
        <el-input v-model="value.catName" placeholder="请输入分类名称" />
      </el-form-item>
      <el-form-item label="分类图片" prop="img">
        <ImageUpload v-model="value.img" :limit="1"/>
        <!--          <el-input v-model="value.img" placeholder="请输入图片/缩略图" />-->
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="value.sort" placeholder="数字越大越排在前" />
      </el-form-item>
      <el-form-item label="父级分类" prop="parentId">
        <treeselect v-model="value.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
                    placeholder="选择上级菜单"/>
      </el-form-item>
      <el-form-item label="是否显示" prop="isShow">
        <el-radio-group disabled v-model="value.isShow">
          <el-radio  v-for="dict in SHOW" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否推荐" prop="isTop">
        <el-radio-group v-model="value.isTop">
          <el-radio v-for="dict in SHOW" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="关键词" prop="keywords">
        <el-input v-model="value.keywords" placeholder="请输入关键词" />
      </el-form-item>
      <el-form-item label="简要说明" prop="description">
        <el-input v-model="value.description" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleNext('infoForm')">下一步，填写商品分类详情</el-button>
        <el-button type="info" size="medium" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {getGoodsCatList} from "@/api/supplier/goodsCat";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import ImageUpload from '@/components/ImageUpload';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listSimpleDepts} from "@/api/system/dept";

export default {
  name: "CatInfoDetail",
  components:{
    ImageUpload,
    Treeselect
  },
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      rules: {
        catName: [
          {required: true, message: '请输入分类名称', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        img: [{required: false, message: '请上传分类图片', trigger: 'blur'}],
        sort: [{required: true, message: '请填写排序', trigger: 'blur'}],
        parentId: [{required: true, message: '请选择父级分类', trigger: 'blur'}],
      },
      menuOptions: [],
      // 数据字典
      SHOW: getDictDatas(DICT_TYPE.JKY_IS_SHOW),
      deptList: [],
      deptOptions: [],
      userId: this.$store.getters.userId,
    }
  },
  created() {
    this.getTreeSelect()
    this.getDeptList()
  },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
    getDeptList() {
      listSimpleDepts().then(response => {
        this.deptOptions = this.handleTree(response.data, "id");
      })
    },
    getTreeSelect() {
      getGoodsCatList().then(response => {
        this.menuOptions = [];
        const menu = {catId: 0, catName: '主类目', children: []};
        menu.children = this.handleTree(response.data, "catId");
        this.menuOptions.push(menu);
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.catId,
        label: node.catName,
        children: node.children
      };
    },
    normalizerDept(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    handleNext(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('nextStep');
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration:1000
          });
          return false;
        }
      });
    },

  }
}
</script>

<style scoped>

</style>
